<template>
  <div>
    <div class="new_phone_shop_content" v-if="info.style == '0'">
      <div class="new_phone_shop_left">
        <div class="new_phone_shop_item" v-for="(item, i) in judge(this.info.banner, 'odd')" :key="i">
          <div class="shop_item_top">
            <img :src="$fnc.getImgUrl(info.banner[item].piclink)" alt />

            <div class="shop-video-icon" v-if="info.banner[item].video">
              <div>
                <img src="../../../../assets/img/play.png" alt />
              </div>
            </div>
          </div>
          <div class="shop_item_title">
            <p>{{ info.banner[item].title }}</p>
          </div>
          <div class="shop_item_label">
            <p v-html="info.banner[item].label"></p>
          </div>
          <div class="shop_item_price">
            <p>￥{{ info.banner[item].price | toFix }}</p>
            <p>{{ info.banner[item].sale }}人付款</p>
          </div>
        </div>
      </div>
      <div class="new_phone_shop_right">
        <div class="new_phone_shop_item" v-for="item in judge(info.banner)" :key="item">
          <div class="shop_item_top">
            <img :src="$fnc.getImgUrl(info.banner[item].piclink)" alt />
            <div class="shop-video-icon" v-if="info.banner[item].video">
              <div>
                <img src="../../../../assets/img/play.png" alt />
              </div>
            </div>
          </div>
          <div class="shop_item_title">
            <p>{{ info.banner[item].title }}</p>
          </div>
          <!-- <div class="shop_item_label">
            <p v-html="info.banner[item].label"></p>
          </div> -->
          <div class="shop_item_price">
            <p>￥{{ info.banner[item].price | toFix }}</p>
            <p>{{ info.banner[item].sale }}人付款</p>
          </div>
        </div>
      </div>
    </div>
    <div class="new_phone_shop_content" v-else-if="info.style == '1' || info.style == '10'">
      <oneShop :info="item" v-for="(item, i) in info.banner" :key="i" />
    </div>
    <div class="new_phone_shop_content" v-else-if="info.style == '2'">
      <card :info="item" v-for="(item, i) in info.banner" :key="i" />
    </div>
  </div>
</template>
<script>
import oneShop from "@/components/currency/page/one-shop.vue";
import card from "@/components/currency/page/card2.vue";
export default {
  data () {
    return {};
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    oneShop,
    card
  },
  methods: {
    judge (args, flag) {
      //奇偶数判断
      var odd = [];
      var even = [];
      var length = args.length || 0;
      for (var i = 0; i <= length - 1; i++) {
        if (i % 2 == 0) {
          odd.push(i);
        } else {
          even.push(i);
        }
      }
      if (flag == "odd") {
        return odd;
      } else {
        return even;
      }
    }
  },
  filters: {
    toFix (val) {
      return parseFloat(val).toFixed(2);
    }
  },
  created() {}
};
</script>
<style lang="less" scoped>
.new_phone_shop_content {
  width: 94%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 10px;
  .new_phone_shop_left,
  .new_phone_shop_right {
    width: 48%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    .new_phone_shop_item {
      width: 100%;
      border-radius: 5px;
      background-color: white;
      // padding: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      > div {
        padding: 0 5px;
      }
      .shop_item_top {
        width: 100%;
        position: relative;
        padding: 0;
        img {
          width: 100%;
        }
      }
      .shop_item_title p {
        font-size: 12px;
        color: #000000;
        text-align: justify;
        text-justify: inter-character;
        line-height: 20px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .shop_item_label {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
      }
      .shop_item_price {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        margin: 5px 0;
        > p:first-child {
          font-size: 18px;
          color: #fc022f;
          font-weight: 400;
        }
        > p:last-child {
          font-size: 12px;
          color: #959595;
        }
      }
    }
  }

  //   .cut_item {
  //     width: 92%;
  //     height: 140px;
  //     padding: 10px;
  //     margin: 10px auto 0 auto;
  //     background-color: #ffffff;
  //     display: flex;
  //     flex-wrap: nowrap;
  //     justify-content: space-between;
  //     align-items: center;
  //     border-radius: 5px;
  //     .cut_item_left {
  //       width: 35%;
  //       height: 100%;
  //       display: flex;
  //       justify-content: center;
  //       align-items: center;
  //       position: relative;
  //       img {
  //         width: 100%;
  //         height: 100%;
  //       }
  //       .shop-video-icon {
  //         position: absolute;
  //         left: 0px;
  //         bottom: 0px;
  //         height: auto;
  //         display: flex;
  //         padding: 10px;
  //         z-index: 4;
  //         > div {
  //           display: flex;
  //           background-color: rgba(0, 0, 0, 0.5);
  //           border-radius: 50%;
  //           img {
  //             width: 30px !important;
  //             height: 30px;
  //           }
  //         }
  //       }
  //     }
  //     .cut_item_right {
  //       width: 62%;
  //       height: 100%;
  //       display: flex;
  //       flex-flow: column;
  //       justify-content: space-between;
  //       align-items: flex-start;
  //       > p:nth-of-type(1) {
  //         font-size: 14px;
  //         height: 36px;
  //         line-height: 18px;
  //         display: -webkit-box;
  //         -webkit-box-orient: vertical;
  //         -webkit-line-clamp: 2;
  //         overflow: hidden;
  //         width: 100%;
  //       }
  //       > p:nth-of-type(2) {
  //         width: 100%;
  //         /* height: 40px; */
  //         margin-top: 5px;
  //         display: flex;
  //         flex-wrap: nowrap;
  //         justify-content: flex-start;
  //         align-items: center;
  //       }
  //       .cut_item_right_price1 {
  //         width: 100%;
  //         height: 35px;
  //         display: flex;
  //         flex-wrap: nowrap;
  //         justify-content: space-between;
  //         align-items: flex-end;
  //         > p:nth-of-type(1) {
  //           font-size: 12px;
  //           font-weight: bold;
  //           color: #000000;
  //           line-height: 14px;
  //           span {
  //             font-size: 16px;
  //             font-weight: bold;
  //             color: #ff2043;
  //           }
  //         }
  //       }
  //       .cut_item_right_price2 {
  //         width: 100%;
  //         height: 30px;
  //         display: flex;
  //         flex-wrap: nowrap;
  //         justify-content: space-between;
  //         align-items: center;
  //         p:nth-of-type(1) {
  //           font-size: 12px;
  //           color: #999;
  //           font-weight: bold;
  //         }
  //         p:nth-of-type(2) {
  //           font-size: 12px;
  //           font-weight: bold;
  //           color: #ffffff;
  //           background-color: #ff3a63;
  //           background: linear-gradient(to left, #ff3a63, #ff7d5e);
  //           border-radius: 10px;
  //           padding: 2px 15px;
  //           border-radius: 20px;
  //         }
  //       }
  //     }
  //   }
}
</style>
